<template>
  <view class="container">
    <view class="main">
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <view class="main_box_head">
          <view>
            {{item.title}}
          </view>
          <text>{{`￥${item.price}`}}</text>
        </view>
        <text>{{item.time}}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const list = ref([])
  const data = [
    {
      title: '收益提现',
      time: '2020-08-15',
      price: 5.00,
    }, {
      title: '支出',
      time: '2020-08-15',
      price: 105.00,
    }, {
      title: '支出',
      time: '2020-08-15',
      price: 15.00,
    }, {
      title: '7天超级会员',
      time: '2020-08-15',
      price: 15.00,
    }, {
      title: '推广收益',
      time: '2020-08-15',
      price: 15.00,
    }, {
      title: '收益提现',
      time: '2020-08-15',
      price: 5.00,
    }, {
      title: '支出',
      time: '2020-08-15',
      price: 105.00,
    }, {
      title: '支出',
      time: '2020-08-15',
      price: 15.00,
    }, {
      title: '7天超级会员',
      time: '2020-08-15',
      price: 15.00,
    }, {
      title: '推广收益',
      time: '2020-08-15',
      price: 15.00,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .container {
    box-sizing: border-box;
    background-color: #f4f4f4;

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      &_box {
        width: 690rpx;
        height: 130rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 20rpx 25rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        

        &_head {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
          view {
            font-size: 28rpx;
            color: #333333;
          }
          text {
          font-size: 32rpx;
          color: #FA4058;
          }
        }

        >text {

          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
</style>